<template>
  <div class="dashboard">
    <!-- 欢迎卡片 -->
    <div class="full-width card">
      <h2>欢迎, {{ username }}!</h2>
    </div>

    <!-- 统计信息 -->
    <div class="small-width card" v-for="(item, index) in ac" :key="index">
      <h3>{{ item.title }}</h3>
      <p>{{ item.value }}</p>
    </div>

    <!-- 饼图：公司规模分布 -->
    <div class="full-width-half-height card">
      <div id="pieChart" style="width: 100%; height: 100%"></div>
    </div>

    <!-- 柱状图：未来一周笔试面试场数 -->
    <div class="full-width-half-height card">
      <div id="interviewScheduleChart" style="width: 100%; height: 100%"></div>
    </div>

    <div class="full-width card">
      <div style="margin-bottom: 30px; font-size: 20px; font-weight: bold">公告列表</div>
      <div >
        <el-timeline  reverse slot="reference">
          <el-timeline-item v-for="item in notices" :key="item.id" :timestamp="item.time">
            <el-popover
                placement="right"
                width="100%"
                trigger="hover"
                :content="item.content">
              <span slot="reference">{{ item.title }}</span>
            </el-popover>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'; 
import { getInfo } from "@/api/login";

const pieOption = {
  title: {
    text: '投递公司规模统计',
    left: 'center',
    top: 'bottom'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Big' },
        { value: 735, name: 'Media' },
        { value: 580, name: 'Small' },
      ]
    }
  ]
};

const chartOption = {
  legend: {  
    data: ['笔试', '面试'] // 这里指定图例为中文  
  },  
  tooltip: {},  
  dataset: {  
    dimensions: ['date', 'exam', 'interview'], // 保持dimensions不变，但内部使用英文  
    source: [  
      { 'date': 'Today', 'exam': 43.3, 'interview': 85.8},  
      { 'date': 'Tomorrow', 'exam': 83.1, 'interview': 73.4},  
      { 'date': 'Next', 'exam': 86.4, 'interview': 65.2},  
      { 'date': '2024-06-22', 'exam': 72.4, 'interview': 53.9}  
    ]  
  },  
  xAxis: { type: 'category' },  
  yAxis: {},  
  series: [  
    { type: 'bar', name: '笔试' }, // 在这里指定中文系列名称  
    { type: 'bar', name: '面试' }  // 在这里指定中文系列名称  
  ]  
};

export default {
  name: 'Dashboard',
  data() {
    return {
      username: 'User',
      ac: [
        { title: '投递总数', value: 120 },
        { title: '最近笔试日期', value: '2023-06-15' },
        { title: '最近面试日期', value: '2023-06-20' },
        { title: '已offer数', value: 3 }
      ],
      notices: [{id:'1',time:'2024-05-15',content:'创建',title:'投递管理器'}],

    };
  },
  created() {
    this.$request.get('/notice/selectAll').then(res => {
      this.notices = res.data || []
    })
    this.$request.get('/ac/selectAll').then(res => {
      this.ac = res.data
    })
  },
  mounted() {
    // 支出饼图
    let pieDom = document.getElementById('pieChart');
    let pieChart = echarts.init(pieDom);
    // pieChart.setOption(pieOption);

    // 收入饼图
    let pieDom1 = document.getElementById('interviewScheduleChart');
    let pieChart1 = echarts.init(pieDom1);
    // pieChart1.setOption(chartOption)

    getInfo().then((res) => {
      this.username = res.data.username;
    });

    this.$request.get('/info/sizeCount').then(res => {
      pieOption.series[0].data = res.data || []
      pieChart.setOption(pieOption)
    })

    this.$request.get('/info/interviewCount').then(res => {
      chartOption.dataset.source = res.data || []
      pieChart1.setOption(chartOption)
    })
  },
};
</script>
  
<style scoped>
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr); 
  grid-gap: 5px;
  padding: 10px;
}

.card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.full-width {
  grid-column: span 4;
  grid-row: span 1;  
}

.small-width {
  grid-column: span 1;
  grid-row: span 1;  
}

.full-width-half-height {
  grid-column: span 2;
  grid-row: span 3;
}

/* 示例CSS，确保容器有明确的宽度和高度 */
.chart-container {
  width: 400px;
  height: 800px;
}
</style>